<script setup lang="ts">
import { queryServerPackageConfig, saveServicePackageBase } from '@/api';
import { useCareLevel } from '@/hooks';
import { getServiceConfigColumns } from '@/tools/care';
import type { PackageDetail, PackageTableColumn } from '@/types';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router'
import ConfigPack from './config-service-pack.vue';

interface BasePackage {
	name: string;
	desc: string;
	status: boolean
}
const baseEdit = ref(false);
const base = reactive<BasePackage>({
	name: '',
	desc: '',
	status: false,
});

const detail = ref<PackageDetail>();
const tableData = ref<PackageTableColumn[]>([]);

const { id } = useRoute().params;

useCareLevel();

const getDetail = () => {
	if (!id) return;
	queryServerPackageConfig(id as string).then((res) => {
		detail.value = res.Data;
		tableData.value = detail.value?.PackageSettings || [];
		base.name = detail.value?.Name || '';
		base.desc = detail.value?.Desc || '';
		base.status = detail.value?.Enable === 1
	});
};

onMounted(() => {
	getDetail();
});

const savaBase = () => {
	saveServicePackageBase(id as string, {
		name: base.name,
		desc: base.desc,
		enable: base.status ? 1 : 0,
	}).then(() => {
		getDetail();
		baseEdit.value = false;
	});
};

</script>

<template>
	<div class="form-wrap">
		<div class="flex justify-between items-center">
			<h4>基础信息</h4>
			<a-space>
				<a-button v-if="!baseEdit" type="primary" @click="baseEdit = !baseEdit">编辑</a-button>
				<template v-else>
					<a-button type="primary" @click="savaBase">保存</a-button>
					<a-button @click="baseEdit = !baseEdit">取消</a-button>
				</template>
			</a-space>
		</div>
		<a-form :model="base">
			<a-row>
				<a-col :span="8">
					<a-form-item label="服务包名称" name="name" class="mr20">
						<a-input v-if="baseEdit" v-model:value="base.name"></a-input>
						<span v-else>{{ base.name }}</span>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="服务包描述" name="desc" class="mr20">
						<a-input v-if="baseEdit" v-model:value="base.desc"></a-input>
						<span v-else>{{ base.desc }}</span>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="服务包状态" name="status">
						<a-switch :disabled="!baseEdit" v-model:checked="base.status" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</div>
	<div class="form-wrap mt20">
		<div class="flex justify-between items-baseline">
			<div>
				<h4>照护内容</h4>
				<a-form-item label="照护等级" class="mr20">
					<span >{{ detail?.Level?.Name }}</span>
				</a-form-item>
			</div>
			<ConfigPack :level="detail?.Level?.ID" :id="detail?.ID" @save="getDetail"></ConfigPack>
		</div>
		<a-table :pagination="false" :dataSource="tableData" :columns="getServiceConfigColumns(true)" bordered>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'Tag'">
					 {{ record.Tag?.Name || '-' }}
				</template>
				<template v-if="column.dataIndex === 'Level'">
					 {{ record.Level?.Name || '全部' }}
				</template>
				<template v-if="column.dataIndex === 'Way'">
					{{ record?.Way?.Name }}
				</template>
				<template v-if="column.dataIndex === 'Name'">
					{{ record?.Name || '-' }}
				</template>
			</template>
		</a-table>
	</div>
</template>
<style scoped></style>
